<template>
  <div class="nav-box">
    <ul>
      <li>关注</li>
      <li @click="faxian">发现</li>
      <li @click="haoxie" class="active">年度好鞋</li>
      <li @click="chuanda">穿搭</li>
      <li>球鞋</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Navhaoxie",
  data() {
    return {
      active: 1,
    };
  },
  methods: {
    faxian() {
      this.$router.push({ path: "/Find" });
    },
    haoxie() {
      this.$router.push({ path: "/Haoxie" });
    },
    chuanda() {
      this.$router.push({ path: "/fashion" });
    },
  },
};
</script>

<style scoped>
.nav-box {
  width: 100%;
  height: 0.47rem;
  line-height: 0.47rem;
  /* display: flex; */
  background-color: #ffffff;
}
.nav-box ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nav-box ul li {
  float: left;
  font-size: 0.14rem;
  text-align: center;
  height: .4rem;
}
.active {
  border-bottom: 0.01rem solid orange;
}
</style>
